<template>
  <div class="container">
    <van-nav-bar title="充值金额" left-arrow @click-left="onClickLeft" />
    <div class="title">
      充值敢探号账户
      <span style="margin-left:5px;color:black">落基</span>
    </div>
    <div class="content">
      <div style="font-size:15px;color: #787d85;">充值余额</div>
      <div class="salemoney">
        <div class="no" :class="salemoney == 5 ? 'effect':'nothing'" @click="choose(5)">5</div>
        <div class="no" :class="salemoney == 20 ? 'effect':'nothing'" @click="choose(20)">20</div>
        <div class="no" :class="salemoney == 50 ? 'effect':'nothing'" @click="choose(50)">50</div>
        <div class="no" :class="salemoney == 100 ? 'effect':'nothing'" @click="choose(100)">100</div>
        <div class="no" :class="salemoney == 500 ? 'effect':'nothing'" @click="choose(500)">500</div>
        <div class="no" :class="salemoney == 1000 ? 'effect':'nothing'" @click="choose(1000)">1000</div>
        <div class="no" :class="salemoney == 3000 ? 'effect':'nothing'" @click="choose(3000)">3000</div>
        <div class="no" :class="salemoney == 5000 ? 'effect':'nothing'" @click="choose(5000)">5000</div>
      </div>
    </div>
    <div class="payment">
        支付金额 <span style="color:#020C1D">￥{{salemoney}}元</span>
    </div>
   <div class="recharge_now">
    <div class="recharge_btn" @click="rechargeClick">立即充值</div>
   </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      salemoney: 0
    };
  },
  created() {},
  methods: {
    rechargeClick(){

    },
    onClickLeft() {
      this.$router.go(-1);
    },
    choose(val) {
      this.salemoney = val;
      console.log("val",val);
    }
  }
};
</script>
<style lang="less" scoped>
/deep/ .van-nav-bar .van-icon {
  color: black;
}
/deep/ .van-nav-bar__content{
  background:#F4F3F3;
}
.container {
  width: 100%;
  height: 100%;
  background: white;
  .title {
    color: #787d85;
    font-size: 15px;
    padding: 15px;
  }
  .content {
    width: 100%;
    padding: 0 15px;
  }
  .nothing {
    background: #f6f8fb;
    width: 76px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    border: 1px #e3e8f1 solid;
    font-size: 15px;
    border-radius: 25px;
    margin-top: 10px;
  }
  .effect {
    background: #f6f8fb;
    width: 76px;
    height: 38px;
    color: #005aff;
    text-align: center;
    line-height: 38px;
    border: 1px #005aff solid;
    font-size: 15px;
    border-radius: 25px;
    margin-top: 10px;
  }
  .salemoney {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  .payment{
    width: 100%;
    padding: 0 15px;
    margin-top: 20px;
    font-size: 15px;
    color: #787d85;
  }
  .recharge_now{
    width: 100%;
    position: absolute;
    padding: 0 15px;
    bottom: 15px;
    left: 0;
    .recharge_btn{
      width: 100%;
      font-size: 15px;
      background: #005aff;
      color: white;
      height: 44px;
      text-align: center;
      border-radius: 20px;
      line-height: 44px;
    }
  }
}
</style>

